import React, { Component } from 'react'
import { Cell, NavBar, Toast } from 'react-vant';


//首页
export default class Home extends Component {

    state = {
        recharlist: ['Q币充值', '点卡充值', '话费充值', '魅道一卡通', '加油卡充值', '余额充值']
    }

    render() {

        let { recharlist } = this.state

        return (
            <div>
                {/* 导航栏组件 */}
                <NavBar
                    title="充值中心"
                    leftText="返回"
                    rightText="充值记录"
                    onClickLeft={() => { }}
                    onClickRight={() => {
                        //跳转到充值记录页面 动态路由传参
                        this.props.history.push(`/record`)
                    }}
                />
                {/* 单元格组件 */}
                {
                    recharlist.map((item, index) => {
                        return <Cell
                            center
                            key={index}
                            title={item}
                            isLink
                            onClick={() => {
                                //跳转到充值记录页面 动态路由传参
                                this.props.history.push(`/recharge/${item}`)
                            }}
                        />
                    })
                }
            </div>
        )
    }
}
